<script setup>
import LimitFram from "./LimitFrame.vue";
import CustomerApi from "@/api/customerApi";
import sysConfigApi from "@/api/sysConfigApi";
import { deepClone, connectionsData, formatTimeStamp, formatTimeMs } from "@/utils";
const props = defineProps({
  limit: {
    type: Array,
    required: true,
  },
});
const Store = useStore();
const blackGroupVisible = ref(false),
  form = ref({ connRela: "", groupId: "", code: "", value: "" }),
  blacklist = ref([]);

const formRef = ref();

const emits = defineEmits(["cancel"]);
const messageData = reactive({
  enumerationList: [],
});
const rules = {
  groupId: [{ required: true, message: "请选择配置", trigger: "change" }],
  connRela: [{ required: true, message: "请选择连接关系", trigger: "change" }],
  code: [{ required: true, message: "请输入code", trigger: "change" }],
  value: [{ required: true, message: "请输入比对值", trigger: "change" }],
};

// 描述
const ruleText = computed(() => {
  let rule = props.limit.value;
  if (!rule.groupId && !rule.connRela) return "";
  let configData = messageData.enumerationList.find(
    (item) => item.id == form.value.groupId
  );
  let connRelaData = connectionsData()["externa"].find(
    (item) => item.id == form.value.connRela
  );
  return `“${configData.name}” ${connRelaData.name} ${rule.value}`;
});

// 获取配置
const getConfigList = async () => {
  const rs = await sysConfigApi.getConfigList({ externalType: "verify" });
  if (rs.code == 200) {
    messageData.enumerationList = rs.payload;
    // blacklist.value = rs.payload[0].params.map((item) => {
    //   return { value: item.paramName, label: item.paramTitle };
    // });
  }
};

const getBlackKeys = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      props.limit.value = deepClone(form.value);
      formatLimit();
      blackGroupVisible.value = false;
    }
  });
};

// 生成表达式
const formatLimit = () => {
  // 表达式最终的样子
  // $_member.svip$$_1 == true

  // props.limit.propertyKey = "userGroup";
  // props.limit.propertyType = 0;
  // props.limit.businessType = "userGroup";
  props.limit.keys = [
    {
      businessType: "external",
      key: `defaultVerify$$_${form.value.groupId}__${Store.state.user.merchantId}__${form.value.code}__${form.value.connRela}__${form.value.value}`,
      obj: [String(form.value.groupId),String(Store.state.user.merchantId),String(form.value.code),String(form.value.connRela),String(form.value.value)]
    },
  ];
  props.limit.expression = `$_external.defaultVerify$$_${form.value.groupId}__${Store.state.user.merchantId}__${form.value.code}__${form.value.connRela}__'${form.value.value}'==true`;
};

const addRule = () => {
  if (formRef.value) formRef.value.resetFields();
  blackGroupVisible.value = true;
};

const editRule = () => {
  form.value = deepClone(props.limit.value);
  blackGroupVisible.value = true;
};

const onClose = () => {
  emits("cancel");
};

onMounted(() => {
  getConfigList();
});

defineExpose({ add: addRule });
</script>
<template>
  <LimitFram title="外部验证" :content="ruleText" @edit="editRule" />
  <Dialog
    v-model="blackGroupVisible"
    title="外部验证"
    :width="500"
    @confirm="getBlackKeys"
    @close="onClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <!-- <el-form-item label="类型" prop="exit">
        <el-radio-group v-model="form.exit">
          <el-radio :label="1">任意匹配</el-radio>
          <el-radio :label="0">不匹配 </el-radio>
          <el-radio :label="2">全匹配</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="选择配置" prop="groupId">
        <el-select
          v-model="form.groupId"
          filterable
          placeholder="请选择"
          @change="onChangeGroup"
        >
          <el-option
            v-for="item in messageData.enumerationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="CODE" prop="code">
        <el-input
          v-model="form.code"
          maxlength="100"
          placeholder="请输入"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="连接关系" prop="connRela">
        <el-select v-model="form.connRela" placeholder="请选择">
          <el-option
            v-for="item in connectionsData()['externa']"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="比对值" prop="value">
        <el-input
          v-model="form.value"
          maxlength="100"
          placeholder="请输入"
          show-word-limit
        />
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<style lang="scss" scoped>
.el-select-v2 {
  min-width: 70%;
}
.el-select {
  width: 100%;
}
</style>
